<!--
 * Tencent is pleased to support the open source community by making 蓝鲸 available.
 * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
-->

<template>
  <div v-bkloading="{ isLoading: fetching || $loading(request.chart) }">
    <cmdb-tips style="margin: 10px 20px" v-show="!(fetching || $loading(request.chart))"
      v-if="$Site.disableOperationStatistic">
      {{$t('运营统计停止统计提示')}}
    </cmdb-tips>
    <div class="operate-menus" v-show="!(fetching || $loading(request.chart))">
      <div class="menu-items menu-items-blue" @click="goRouter(MENU_RESOURCE_BUSINESS)">
        <div class="item-left">
          <span v-if="navData.biz">{{ navData.biz }}</span>
          <span v-if="!navData.biz">0</span>
          <span>{{$t('业务总数')}}</span>
        </div>
        <div class="item-right item-right-left">
          <i class="icon icon-cc-business icon-size"></i>
        </div>
      </div>
      <div class="menu-items menu-items-white" @click="goRouter(MENU_RESOURCE_HOST)">
        <div class="item-left">
          <span v-if="navData.host">{{ navData.host }}</span>
          <span v-if="!navData.host">0</span>
          <span>{{$t('主机总数')}}</span>
        </div>
        <div class="item-right item-right-right">
          <i class="icon icon-cc-host"></i>
        </div>
      </div>
      <div class="menu-items menu-items-blue" @click="goRouter(MENU_MODEL_MANAGEMENT)">
        <div class="item-left">
          <span v-if="navData.model">{{ navData.model }}</span>
          <span v-if="!navData.model">0</span>
          <span>{{$t('自定义模型总数')}}</span>
        </div>
        <div class="item-right item-right-left">
          <i class="menu-icon icon-cc-model-total icon-size"></i>
        </div>
      </div>
      <div class="menu-items menu-items-white">
        <div class="item-left">
          <span v-if="navData.inst">{{ navData.inst }}</span>
          <span v-if="!navData.inst">0</span>
          <span>{{$t('实例总数')}}
            <bk-popover :delay="300" :offset="10" placement="top" class="operate-pop">
              <i class="menu-icon icon-cc-attribute"></i>
              <span class="popover-content" slot="content">
                {{tooltip}}
              </span>
            </bk-popover>
          </span>
        </div>
        <div class="item-right item-right-right">
          <i class="icon icon-cc-instance-total"></i>
        </div>
      </div>
    </div>
    <div class="main" v-show="!(fetching || $loading(request.chart))">
      <div class="operation-top">
        <span class="operation-title">{{$t('主机统计')}}</span>
        <cmdb-auth :auth="{ type: $OPERATION.U_STATISTICAL_REPORT }" @update-auth="handleReceiveAuth">
          <bk-button slot-scope="{ disabled }"
            class="icon-btn"
            theme="primary"
            text
            v-bk-tooltips="$t('添加主机图表')"
            :disabled="disabled"
            @click="openNew('add', 'host')">
            <i class="icon icon-cc-add-line"></i>
          </bk-button>
        </cmdb-auth>
      </div>
      <div v-for="(item, key) in hostData.disList"
        :key="item.report_type + item.config_id"
        :style="{ width: item.width + '%' }"
        class="operation-layout">
        <div class="chart-child">
          <div class="chart-title">
            <span>{{item.name}}</span>
            <div class="charts-options" v-if="updateAuth">
              <i class="bk-icon icon-arrows-up icon-weight icon-disable"
                v-if="key === 0"
                v-bk-tooltips="$t('已置顶，无法上移')">
              </i>
              <i class="bk-icon icon-arrows-up icon-weight" v-else
                @click="moveChart('host', 'up', key, hostData.disList)">
              </i>
              <i class="bk-icon icon-arrows-down icon-weight icon-disable"
                v-if="key === hostData.disList.length - 1"
                v-bk-tooltips="$t('已置底，无法下移')">
              </i>
              <i class="bk-icon icon-arrows-down icon-weight"
                v-else
                @click="moveChart('host', 'down', key, hostData.disList)">
              </i>
              <i class="icon icon-cc-edit-shape"
                @click="openNew('edit', 'host', item, key)"></i>
              <i class="icon icon-cc-tips-close"
                @click="deleteChart('host', key, hostData.disList, item)"></i>
            </div>
          </div>
          <div class="chart-bottom">
            <div class="operation-charts" :id="item.report_type + item.config_id"></div>
          </div>
          <div v-if="item.noData" class="null-data">
            <span>{{$t('暂无数据')}}</span>
          </div>
          <div class="chart-date" v-if="item.showDate">
            <bk-date-picker
              transfer
              :options="options"
              @change="dateChange"
              class="options-filter"
              :type="'daterange'"
              :clearable="false"
              v-model="dateRange">
            </bk-date-picker>
          </div>
        </div>
      </div>
      <div class="operation-top">
        <span class="operation-title">{{$t('实例统计')}}</span>
        <cmdb-auth :auth="{ type: $OPERATION.U_STATISTICAL_REPORT }">
          <bk-button slot-scope="{ disabled }"
            class="icon-btn"
            theme="primary"
            text
            v-bk-tooltips="$t('添加实例图表')"
            :disabled="disabled"
            @click="openNew('add', '')">
            <i class="icon icon-cc-add-line"></i>
          </bk-button>
        </cmdb-auth>
      </div>
      <div v-for="(item, key) in instData.disList"
        :key="item.report_type + item.config_id"
        :style="{ width: item.width + '%' }"
        class="operation-layout">
        <div class="chart-child">
          <div class="chart-title">
            <span>{{item.name}}</span>
            <div class="charts-options" v-if="updateAuth">
              <i class="bk-icon icon-arrows-up icon-weight icon-disable"
                v-if="key === 0"
                v-bk-tooltips="$t('已置顶，无法上移')">
              </i>
              <i class="bk-icon icon-arrows-up icon-weight"
                v-else
                @click="moveChart('inst', 'up', key, instData.disList)">
              </i>
              <i class="bk-icon icon-arrows-down icon-weight icon-disable"
                v-if="key === instData.disList.length - 1"
                v-bk-tooltips="$t('已置底，无法下移')">
              </i>
              <i class="bk-icon icon-arrows-down icon-weight"
                v-else
                @click="moveChart('inst', 'down', key, instData.disList)">
              </i>
              <i class="icon icon-cc-edit-shape" @click="openNew('edit', item.bk_obj_id, item, key)"></i>
              <i class="icon icon-cc-tips-close"
                @click="deleteChart('inst', key, instData.disList, item)"></i>
            </div>
          </div>
          <div class="chart-bottom">
            <div class="operation-charts" :id="item.report_type + item.config_id"></div>
          </div>
          <div v-if="item.noData" class="null-data">
            <span>{{$t('暂无数据')}}</span>
          </div>
        </div>
      </div>
    </div>
    <v-detail v-if="isShow"
      :open-type="editType.openType"
      :host-type="editType.hostType"
      :chart-data="newChart"
      :existed-charts="existedCharts"
      @transData="saveData"
      @closeChart="cancelData">
    </v-detail>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    MENU_RESOURCE_BUSINESS,
    MENU_RESOURCE_HOST,
    MENU_MODEL_MANAGEMENT
  } from '@/dictionary/menu-symbol'
  import { mapActions } from 'vuex'
  import vDetail from './chart-detail'
  let Plotly
  let PlotlyCN
  export default {
    name: 'index',
    components: {
      vDetail
    },
    data() {
      const startDate = this.$tools.formatTime(moment().subtract(6, 'days')
        .toDate(), 'YYYY-MM-DD')
      const endDate = this.$tools.formatTime(moment().toDate(), 'YYYY-MM-DD')
      return {
        MENU_RESOURCE_BUSINESS,
        MENU_RESOURCE_HOST,
        MENU_MODEL_MANAGEMENT,
        tooltip: this.$t('不包含业务、主机模型及实例'),
        isShow: false,
        newChart: {},
        editType: {
          openType: 'add',
          hostType: 'host',
          index: ''
        },
        hostData: {
          disList: []
        },
        instData: {
          disList: []
        },
        navData: {
          biz: '',
          host: '',
          module: '',
          inst: '',
          model: ''
        },
        dateRange: [startDate, endDate],
        dateChart: {},
        maxRange: [],
        options: {
          disabledDate(date) {
            const today = new Date()
            const lastYears = moment().subtract(1, 'years')
              .toDate()
            return today < date || date < lastYears
          }
        },
        existedCharts: [],
        updateAuth: false,
        request: {
          chart: Symbol('chart')
        },
        fetching: false
      }
    },
    async created() {
      this.fetching = true
      const [plotly, plotlyCn] = await Promise.all([
        import('plotly.js'),
        import('plotly.js/lib/locales/zh-cn.js')
      ])
      this.fetching = false
      Plotly = plotly
      PlotlyCN = plotlyCn
      this.getChartList()
    },
    methods: {
      ...mapActions('operationChart', [
        'getCountedCharts',
        'getCountedChartsData',
        'deleteOperationChart',
        'updateChartPosition'
      ]),
      async getChartList() {
        try {
          const res = await this.getCountedCharts({
            config: {
              requestId: this.request.chart,
              globalPermission: false
            }
          })
          this.hostData.disList = res.info.host || []
          this.instData.disList = res.info.inst || []

          if (res.info.nav && res.info.nav.length) {
            res.info.nav.forEach((item) => {
              this.getNavData(item, 'nav')
            })
          }

          this.hostData.disList.forEach((item) => {
            this.getNavData(item, 'host')
          })
          this.instData.disList.forEach((item) => {
            this.getNavData(item, 'inst')
          })
        } catch ({ permission }) {
          if (permission) {
            this.$route.meta.view = 'permission'
          }
        }
      },
      async getNavData(item, type) {
        const res = await this.getCountedChartsData({
          params: {
            config_id: item.config_id
          },
          config: {
            globalError: false,
            globalPermission: false
          }
        })
        if (type === 'nav') {
          res.forEach((items) => {
            this.navData[items.id] = items.count
          })
        } else {
          if (JSON.stringify(res) === '{}' || JSON.stringify(res) === '[]' || res === null) {
            item.hasData = false
            item.data = {
              data: [{
                labels: [],
                type: item.chart_type,
                values: [],
                x: [],
                y: []
              }]
            }
          } else {
            item.hasData = true
            item.data = await this.dataDeal(item, res)
          }
          this.drawCharts(item)
        }
      },
      dataDeal(data, res) {
        const returnData = {
          data: [],
          minTime: '',
          maxTime: '',
          maxRange: 0
        }
        const hoverlabel = {
          bgcolor: '#fff',
          bordercolor: '#DCDEE5',
          font: {
            color: '#63656E',
            size: '12'
          }
        }
        const marker = {
          size: 16,
          color: []
        }
        if (res && Array.isArray(res)) {
          const content = {
            labels: [],
            values: [],
            x: [],
            y: [],
            type: data.chart_type,
            hoverlabel,
            marker,
            mode: 'markers',
            textinfo: 'none',
            hole: 0.7,
            pull: 0.01,
            width: 0.1
          }
          let zeroList = 0
          res.forEach((item) => {
            // eslint-disable-next-line no-plusplus
            if (item.count === 0) zeroList++
            if (data.chart_type === 'pie') {
              content.labels.push(item.id)
              if (item.count !== 0) content.values.push(item.count)
            } else {
              const color = '#3A84FF'
              content.marker.color.push(color)
              content.x.push(item.id)
              content.y.push(item.count)
            }
          })
          if (zeroList === res.length) data.hasData = false
          if (data.chart_type !== 'pie') content.width = (0.015 * data.x_axis_count * (data.width === '50' ? 2 : 1))
          returnData.data.push(content)
        } else if (res && !Array.isArray(res)) {
          const barModel = {
            chart: {
              delete: {
                name: this.$t('删除'),
                type: 'bar',
                y: [],
                color: '#3A84FF',
                marker: this.$tools.clone(marker),
                hoverinfo: 'y+name',
                hoverlabel
              },
              update: {
                name: this.$t('更新'),
                type: 'bar',
                y: [],
                color: '#38C1E2',
                marker: this.$tools.clone(marker),
                hoverinfo: 'y+name',
                hoverlabel
              },
              create: {
                name: this.$t('新建'),
                type: 'bar',
                y: [],
                color: '#59D178',
                marker: this.$tools.clone(marker),
                hoverinfo: 'y+name',
                hoverlabel
              }
            },
            x: [],
            isX: false
          }
          // eslint-disable-next-line no-restricted-syntax
          for (const item in res) {
            const content = {
              name: item,
              x: [],
              y: [],
              hoverlabel,
              textinfo: 'none'
            }
            if (Array.isArray(res[item])) {
              barModel.isX = false
              res[item].forEach((child) => {
                const time = this.$tools.formatTime(child.id, 'YYYY-MM-DD')
                returnData.minTime = returnData.minTime === '' ? time : returnData.minTime
                returnData.maxTime = time > returnData.maxTime ? time : returnData.maxTime
                returnData.minTime = time < returnData.minTime ? time : returnData.minTime
                content.x.push(time)
                content.y.push(child.count)
                content.mode = 'line'
              })
              returnData.data.push(content)
            } else {
              barModel.x.push(item)
              barModel.isX = true
              // eslint-disable-next-line no-restricted-syntax
              for (const chartItem in barModel.chart) {
                barModel.chart[chartItem].y.push(res[item][chartItem])
                barModel.chart[chartItem].marker.color.push(barModel.chart[chartItem].color)
              }
            }
          }
          if (barModel.isX) {
            // eslint-disable-next-line no-restricted-syntax
            for (const chartItem in barModel.chart) {
              barModel.chart[chartItem].x = barModel.x
              returnData.data.push(barModel.chart[chartItem])
            }
          }
        }
        if (data.report_type === 'host_change_biz_chart') this.maxRange = [returnData.minTime, returnData.maxTime]
        return returnData
      },
      drawCharts(item) {
        const layConfig = {
          type: 'category',
          nticks: item.x_axis_count,
          range: [-0.5, item.x_axis_count - 0.5],
          fixRange: item.x_axis_count >= item.data.data[0].x.length,
          colorway: ['#3A84FF', '#A3C5FD', '#59D178', '#94F5A4', '#38C1E2', '#A1EDFF', '#4159F9', '#7888F0', '#EFAF4B', '#FEDB89', '#FF5656', '#FD9C9C'],
          legend: {
            orientation: 'h',
            xanchor: 'auto',
            yanchor: 'bottom',
            valign: 'bottom',
            x: 0.48,
            y: -0.5
          }
        }
        const myDiv = item.report_type + item.config_id
        const { data } = item.data
        if (!item.hasData) this.$set(item, 'noData', true)
        if (item.chart_type === 'pie') {
          layConfig.legend = {
            xanchor: 'auto',
            yanchor: 'auto',
            valign: 'right',
            y: 0.5
          }
        }
        if (item.report_type === 'host_change_biz_chart') {
          if (this.dateRange.length !== 0) {
            // eslint-disable-next-line prefer-destructuring
            item.data.minTime = this.dateRange[0]
            // eslint-disable-next-line prefer-destructuring
            item.data.maxTime = this.dateRange[1]
          } else {
            this.dateRange = [item.data.minTime, item.data.maxTime]
          }
          layConfig.type = 'date'
          layConfig.range = [item.data.minTime, item.data.maxTime]
          this.dateChart = item
          this.$set(item, 'showDate', true)
          layConfig.fixRange = (this.maxRange[0] >= item.data.minTime) && (this.maxRange[1] <= item.data.maxTime)
          layConfig.nticks = item.x_axis_count % 2 === 0 ? item.x_axis_count : (item.x_axis_count + 1)
          layConfig.colorway = ['#3A84FF', '#59D178', '#38C1E2', '#4159F9', '#EFAF4B', '#FF5656', '#904DF7', '#CA78F0', '#B9E145', '#F6E354']
        }
        const layout = {
          barmode: 'stack',
          height: 250,
          margin: {
            l: 50,
            r: 50,
            t: 30,
            b: 50
          },
          yaxis: {
            fixedrange: true,
            rangemode: 'tozero',
            zeroline: false
          },
          xaxis: {
            showline: true,
            linecolor: '#BFBFBF',
            type: layConfig.type,
            nticks: item.x_axis_count,
            range: layConfig.range,
            showgrid: false,
            autorange: false,
            tickformat: '%Y-%m-%d',
            fixedrange: layConfig.fixRange,
            dtick: item.report_type === 'host_change_biz_chart' ? 24 * 60 * 60 * 1000 : ''
          },
          bargap: 0.1,
          bargroupgap: 1.0044 - (0.0401 * item.x_axis_count),
          dragmode: 'pan',
          colorway: layConfig.colorway,
          legend: layConfig.legend
        }
        if (item.report_type !== 'model_inst_change_chart') layout.hovermode = 'closest'
        const options = {
          displaylogo: false,
          displayModeBar: false,
          responsive: true
        }
        if (this.$i18n.locale === 'zh_CN') {
          Plotly.register(PlotlyCN)
          options.locale = 'zh-CN'
        }
        if (this.editType.openType === 'edit') {
          Plotly.purge(myDiv)
          setTimeout(() => {
            Plotly.newPlot(myDiv, data, layout, options)
            if (item.data.data[0].mode !== 'line') this.hoverConfig(document.getElementById(myDiv), myDiv)
          }, 100)
        } else {
          Plotly.newPlot(myDiv, data, layout, options)
          if (item.data.data[0].mode !== 'line') this.hoverConfig(document.getElementById(myDiv), myDiv)
        }
      },
      hoverConfig(myPlot, myDiv) {
        myPlot.on('plotly_hover', (data) => {
          const colors = ['#A3C5FD', '#B0E7F4', '#BDEDC9']
          this.reStyle(myDiv, data, colors)
        })
        myPlot.on('plotly_unhover', (data) => {
          const colors = ['#3A84FF', '#38C1E2', '#59D178']
          this.reStyle(myDiv, data, colors)
        })
      },
      reStyle(myDiv, data, color) {
        let pn = ''
        let tn = ''
        let colors = []
        for (let i = 0; i < data.points.length; i++) {
          pn = data.points[i].pointNumber
          tn = data.points[i].curveNumber
          colors = data.points[i].data.marker.color
        }
        if (data.points.length === 1) {
          // eslint-disable-next-line prefer-destructuring
          colors[pn] = color[0]
          const update = {
            marker: {
              color: colors
            }
          }
          Plotly.restyle(myDiv, update, [tn])
        } else {
          // eslint-disable-next-line prefer-destructuring
          data.points[0].data.marker.color[pn] = color[0]
          // eslint-disable-next-line prefer-destructuring
          data.points[1].data.marker.color[pn] = color[1]
          // eslint-disable-next-line prefer-destructuring
          data.points[2].data.marker.color[pn] = color[2]
          const update = {
            data: {
              maker: {
                // eslint-disable-next-line max-len
                color: [data.points[0].data.marker.color, data.points[1].data.marker.color, data.points[2].data.marker.color]
              }
            }
          }
          Plotly.restyle(myDiv, update, [0, 2])
        }
      },
      moveChart(type, dire, key, list) {
        if (dire === 'up' && key !== 0) {
          const [target] = list.splice(key - 1, 1, list[key])
          list[key] = target
        } else if (dire === 'down' && key !== list.length - 1) {
          const [target] = list.splice(key, 1, list[key + 1])
          list[key + 1] = target
        }
        if (type === 'host') this.hostData.disList = list
        else this.instData.disList = list
        this.updatePosition()
      },
      deleteChart(type, key, list, item) {
        this.$bkInfo({
          title: this.$tc('是否确认删除'),
          subTitle: `确定要删除【${item.name}】`,
          extCls: 'bk-dialog-sub-header-center',
          confirmFn: () => {
            list.splice(key, 1)
            if (type === 'host') this.hostData.disList = list
            else this.instData.disList = list
            this.deleteOperationChart({
              id: item.config_id
            })
            this.updatePosition()
          }
        })
      },
      async openNew(type, host, data, key) {
        this.editType.hostType = host
        this.editType.key = key
        this.editType.openType = type
        if (type === 'edit') {
          this.newChart = this.$tools.clone(data)
          this.newChart.title = data.name
          this.newChart.bk_obj_id = data.bk_obj_id ? data.bk_obj_id : host
          this.existedCharts = []
        } else {
          this.newChart = {
            report_type: 'custom',
            name: '',
            config_id: null,
            bk_obj_id: host,
            chart_type: 'pie',
            field: '',
            width: '50',
            x_axis_count: 10
          }
          this.existedCharts = host === 'host' ? this.hostData.disList : this.instData.disList
        }
        this.isShow = true
      },
      async saveData(data) {
        let editList = []
        if (this.editType.hostType === 'host') editList = this.hostData.disList
        else editList = this.instData.disList
        if (this.editType.openType === 'add') {
          editList.push(data)
        } else {
          editList[this.editType.key] = data
        }
        this.isShow = false
        await this.getNavData(data, this.editType.hostType)
        this.updatePosition()
        this.newChart = {}
      },
      cancelData() {
        this.isShow = false
        this.newChart = {}
      },
      updatePosition() {
        const data = {
          host: [],
          inst: []
        }
        this.hostData.disList.forEach((item) => {
          data.host.push(item.config_id)
        })
        this.instData.disList.forEach((item) => {
          data.inst.push(item.config_id)
        })
        this.updateChartPosition({
          params: {
            position: data
          }
        })
      },
      goRouter(route) {
        this.$routerActions.redirect({ name: route })
      },
      dateChange(date) {
        // eslint-disable-next-line prefer-destructuring
        this.dateChart.data.maxTime = date[1]
        // eslint-disable-next-line prefer-destructuring
        this.dateChart.data.minTime = date[0]
        this.editType.openType = 'edit'
        this.drawCharts(this.dateChart)
      },
      handleReceiveAuth(auth) {
        this.updateAuth = auth
      }
    }
  }
</script>

<style scoped lang="scss">
    .views-layout {
        padding: 10px!important;
        background:rgba(250,251,253,1);
    }
    .title-block{
        display: none;
        position: absolute;
        width: max-content;
        top: -140%;
        left: 0;
        color: #fff;
        height: 24px;
        padding: 0 5px;
        line-height: 22px;
        font-size: 12px;
        border-radius: 3px;
        transform: translate(-37%);
        background: rgba(0,0,0,0.8);
    }
    .title-block:before{
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: 50%;
        transform: translate(-5px);
        bottom: -5px;
        border-left: 5px solid transparent;
        border-top: 5px solid rgba(0,0,0,0.8);
        border-right: 5px solid transparent;
    }
    .operation-top{
        padding: 10px 15px;
        margin-top: 15px;
        .operation-title{
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            color: #313238;
            vertical-align: middle;
        }
        .icon-btn {
            font-size: 0;
            .icon {
                font-size: 16px;
                &:hover {
                    background:rgba(225,236,255,1);
                }
            }
        }
    }
    .operate-menus{
        padding: 0 10px;
        display: flex;
        width: 100%;
        .menu-items-blue{
            background: linear-gradient(165deg,rgba(108,186,255,1) 0%,rgba(58,132,255,1) 100%);
            &:hover{
                 box-shadow:0px 2px 6px 0px rgba(58,132,255,1);
            }
        }
        .menu-items-white{
            background: linear-gradient(165deg,rgba(77,212,240,1) 0%,rgba(27,167,207,1) 100%);
            &:hover{
                 box-shadow:0px 2px 6px 0px rgba(27,167,207,1);
            }
        }
        .menu-items{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 25%;
            height: 105px;
            margin: 10px;
            float: left;
            cursor: pointer;
            box-shadow: 0 2px 4px 0 rgba(220,222,229,1);
            border-radius: 4px;
            position: relative;
            .item-left{
                height: 45px;
                margin-left: 26px;
                line-height: 45px;
                span{
                    display: block;
                    text-align: left;
                    &:first-child{
                        width: 29px;
                        height: 29px;
                        font-size: 24px;
                        font-weight: bold;
                        color: rgba(255,255,255,1);
                        line-height: 29px;
                    }
                    &:last-child{
                        max-width: 125px;
                        height: 16px;
                        font-size: 12px;
                        font-weight: bold;
                        color: rgba(255,255,255,1);
                        line-height: 16px;
                        i{
                            display: inline-block;
                            font-size: 16px;
                            margin-left: 5px;
                        }
                    }
                    .operate-pop{
                        vertical-align: bottom;
                    }
                }
            }
            .item-right-left{
                background-color: #377AE9;
            }
            .item-right-right{
                background-color: #19A2CA;
            }
            .item-right{
                 display: flex;
                 flex: 60px 0 0;
                 justify-content: center;
                 align-items: center;
                 margin-right: 35px;
                 height: 60px;
                 border-radius: 50%;
               i{
                   color: white;
                   font-size: 24px;
               }
               .icon-size {
                   font-size: 26px;
               }
            }
        }
    }
    .main {
        padding: 0 10px;
    }
    .operation-layout{
        display: inline-block;
        position: relative;
        padding: 10px 10px;
        .chart-child{
             background: rgba(255,255,255,1);
             border-radius: 2px;
             border: 1px solid #DCDEE5;
             position: relative;
             width: 100%;
             .operation-charts{
                width: 100%;
             }
             &:hover {
                  box-shadow:0 2px 6px 0 rgba(220,222,229,1);
             }
        }
        .chart-child:hover{
            .charts-options{
                display: inline-block;
            }
        }
        .chart-bottom{
            width: 100%;
            height: 100%;
            padding: 0 10px 10px;
        }
        .chart-title{
            display: block;
            height: 50px;
            border-bottom: 1px solid #F0F1F5;
            .charts-options{
                display: none;
                margin-left: 15px;
                line-height: 48px;
                color: #3A84FF;
                i{
                    box-sizing: border-box;
                    cursor: pointer;
                    margin-left: 3px;
                    padding: 1px;
                    font-size: 12px;
                    &.icon-arrows-down,
                    &.icon-arrows-up {
                        font-size: 20px;
                        margin: 0 -3px;
                    }
                    &:hover{
                         color: #2D6ACF
                    }
                }
            }
            span{
                line-height: 50px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(99,101,110,1);
                margin-left: 21px;
            }
        }
        .chart-date{
            line-height: 48px;
            position: absolute;
            right: 25px;
            top: 0;
            width: 250px;
        }
        .disable-title {
            display: none;
        }
        .icon-disable{
            color: #DCDEE5!important;
            position: relative;
            &:hover{
                .title-block {
                    top: -165%;
                    transform: translate(-42%);
                    display: block;
                }
             }
        }
        .icon-weight{
            padding: 0!important;
            font-size: 18px;
            font-weight: bold;
        }
        .null-data {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            height: 19px;
            span {
                margin: 0 auto;
                display: block;
                font-size: 14px;
                color: rgba(151,155,165,1);
                line-height: 19px;
            }
        }
    }
</style>
